<style scoped lang="scss"></style>
<template>
  <div class="user-search">
    <SearchHeader :defaultTab="'user'" :placeholder="'用户描述'" @back="handleBack" @tab-change="handleSwitchTab"
      @search="handleSearch" />
    <UserRelationList :userList="userList" :showHeader="showHeader" title="搜索结果" @handleItem="handleClick" />
  </div>
</template>
<script setup>
import SearchHeader from '@/components/common/SearchHeader.vue'
import UserRelationList from '../../components/common/UserRelationList.vue'
import { searchUserAPI } from '@/api/search/search'
import { useUserStore } from '@/store/modules/user/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()

const userList = ref([])
// 控制头部组件
const showHeader = ref(false)
const page = ref(1)
const handleBack = () => {
  router.push('/home')
}
const handleSwitchTab = (tab) => {
  if (tab === 'video') {
    router.push('/search/video')
  } else if (tab === 'user') {
    router.push('/search/user')
  }
}
const handleSearch = async (params) => {
  try {
    const res = await searchUserAPI(userStore.userInfo.userId, page.value, params.key)
    if (res.code === 200) {
      userList.value = res.data
      console.log(userList.value);
    }
  } catch (err) {
    console.log(err);
  }
}
async function handleClick({,}) {
  try {
    // 调用关注接口（关注列表的API）
    const res = await triggerFollowAPI(userId, item.userId)
    if (res.code === 200) {
      // 更新本地数据（使用组件计算的newStatus）
      const index = followsList.value.findIndex(i => i.userId === item.userId)
      if (index > -1) {
        followsList.value[index].bothStatus = newStatus
      }
      // 提示用户
      proxy.$toast({ message: res.data })
    }
  } catch (error) {
    console.log(error)
    proxy.$toast({ message: '操作失败', type: 'error' })
  }
}
</script>